import React, { PureComponent } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import { Card } from 'antd';
import { formatMoment } from '../../utils/utils';
import defaultCover from '../../assets/default.png';
import styles from './Card.less';

const { Meta } = Card;

@connect()
export default class extends PureComponent {
  state = {
    img: '',
    likeNum: '0',
  };

  componentDidMount() {
    const { picInfo } = this.props;
    this.setState({
      img: picInfo.imgUrl,
      likeNum: `${picInfo.like}`,
    });
  }

  handleDetail = id => {
    const { onDetail } = this.props;
    onDetail(id);
  };

  render() {
    const { picInfo } = this.props;
    const { img, likeNum } = this.state;

    return (
      <Card
        className={styles.imgWrapper}
        cover={
          <img
            src={img}
            onError={() => this.setState({ img: defaultCover })}
            onClick={() => this.handleDetail(picInfo.id)}
            alt="cover"
          />
        }
      >
        <Meta
          title={picInfo.brife}
          description={formatMoment(moment(picInfo.updated_at), 'type4')}
        />
        <div className={styles.btnWrapper}>
          <div className={styles.likeWrapper}>
            赞：
            <span>{likeNum}</span>
            &nbsp;评：
            <span>{picInfo.comments.length}</span>
          </div>
        </div>
      </Card>
    );
  }
}
